import React, { useEffect, useState } from "react";
import { InputNumber, Space } from "antd";

type xlNumberType = {
  splitTxt?: string;
  placeholder?: string [];
  value?: any;
  onChange?: any
}
const XlNumberRange = ({splitTxt = '至', placeholder = [], value, onChange}: xlNumberType) => {
  const [current, setCurrent] = useState<any []>([]);

  const handleChange = (val: number | null, index: number) => {
    const arr = [...current];
    arr.splice(index, 1, val);
    setCurrent(arr);
    onChange(arr);
  }

  useEffect(() => {
    if (value) {
      setCurrent([...value])
    } else {
      setCurrent([]);
    }
  }, [JSON.stringify(value)]);
  return (
    <Space>
      <InputNumber placeholder={placeholder?.[0]} value={value?.[0]} onChange={(val: number|null) => handleChange(val, 0)} />
      <span>{splitTxt}</span>
      <InputNumber placeholder={placeholder?.[1]} value={value?.[1]} onChange={(val: number|null) => handleChange(val, 1)} />
    </Space>
  );
}
export default XlNumberRange;